import { Column } from '@ant-design/charts';

//显示的数据
const data = [
    {
      className: 'f01',
      nums: 28,
    },
    {
      className: 'f02',
      nums: 10,
    },
    {
        className: 'f03',
        nums: 14,
    },
    
  ];
  //图像的配置
  const config = {
    data,  //data 对应上面的data
    xField: 'className',
    yField: 'nums',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
      // 'top', 'bottom', 'middle',
      // 配置样式
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      className: {
        alias: '班级名称',
      },
      nums: {
        alias: '班级总人数',
      },
    },
  };


function StudentList(){

    return(
        <div>
            <h1>学生分布</h1>
            <hr></hr>
            <Column {...config} />;
        </div>
    )
}
export default StudentList